<template>
    <div class="bg-white px-3" style="margin: -20px; margin-top:-1rem; margin-bottom: 0!important;">
        <div class="py-2 border-bottom d-flex align-items-center">
            <el-button type="primary" size="mini" @click="createTop">创建顶级分类</el-button>
        </div>

        <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" default-expand-all
            :expand-on-click-node="false" draggable @node-drop="nodeDrop" @node-drop-end="nodeDropEnd">
            <span class="custom-tree-node" slot-scope="{ node,data }">
                <div>
                    <!-- 如果处于编辑状态的话就显示input框，否则就显示node.label -->
                    <!-- <el-input v-if="data.editStatus" v-model="data.label" size="mini"></el-input> -->
                    <!-- 修改后的绑定data.name -->
                    <el-input v-if="data.editStatus" v-model="data.name" size="mini"></el-input>
                    <span v-else>{{ node.label }}</span>
                </div>
                <span>
                    <el-button size="mini" :type="data.status ? 'primary' : 'danger'" @click.stop="showOrHide(data)">
                        {{ data.status ? '显示' : '隐藏' }}
                    </el-button>
                    <el-button type="success" size="mini" @click="append(data)">
                        增加
                    </el-button>
                    <el-button :type="data.editStatus ? 'default' : 'warning'" size="mini" @click="edit(data)">
                        {{ data.editStatus ? '修改完成' : '修改' }}
                    </el-button>
                    <el-button type="danger" size="mini" @click="remove(node, data)">
                        删除
                    </el-button>
                </span>
            </span>
        </el-tree>
    </div>

</template>
<script>
export default {
    name: 'listCategory',
    inject: ['layout'],//注入layout的showloading方法
    data() {
        return {
            data: [

            ],
            // data: [{
            //     id: 1,
            //     label: '一级 1',
            //     status: 1, //显示状态为显示
            //     editStatus: false,//是否是编辑的状态
            //     children: [{
            //         id: 2,
            //         label: '二级 1-1',
            //         status: 1, //显示状态为显示
            //         editStatus: false,//是否是编辑的状态
            //         children: [{
            //             id: 3,

            //             label: '三级 1-1-1',
            //             status: 1, //显示状态为显示
            //             editStatus: false,//是否是编辑的状态
            //         }]
            //     }]
            // }],
            defaultProps: {
                // 配置树形结构的label，后面的label是data中存储的节点的名称
                children: 'child',
                // 配置树形结构的label，后面的label是data中存储的节点的名称
                label: 'name'
            }
        };
    },
    created() {
        this.__init()
    },
    computed: {
        // 排序后的数据
        sortData() {
            let data = []
            let sort = function (arr) {
                arr.forEach(item => {
                    data.push(item)
                    if (Array.isArray(item.child) && item.child.length) {
                        sort(item.child)
                    }
                })
            }
            sort(this.data)
            data = data.map((item, index) => {
                return {
                    id: item.id,
                    order: index,
                    category_id: item.category_id,
                }
            })
            return data;
        }
    },
    methods: {
        __init() {
            this.layout.showLoading() // 显示加载动画
            this.$axios.get('/admin/category', {
                token: true
            }).then(res => {
                // console.log('分类数据：', res);
                let data = res.data.data;

                let addEditStatus = function (arr) {
                    arr.forEach(item => {
                        item.editStatus = false; // 对每一个节点的初始化编辑状态为false
                        // 如果存在子分类
                        if (item.child && item.child.length > 0) {
                            addEditStatus(item.child); // 递归处理子节点
                        }
                    });
                };
                addEditStatus(data); // 初始化编辑状态
                // console.log('处理后的分类数据：', data);
                this.data = data;
                this.layout.hideLoading(); // 显示加载动画
            }).catch(() => {
                this.layout.hideLoading(); // 隐藏加载动画
            });
        },
        handleNodeClick() {
            // console.log(data);
        },
        // 树形工具的展开和不展开
        showOrHide(data) {
            // 取反
            // data.status = data.status ? 0 : 1

            this.layout.showLoading() // 显示加载动画
            // 如果是显示状态1就改为隐藏状态0，如果是隐藏状态就改为显示状态
            let status = data.status ? 0 : 1
            let msg = status ? '显示' : '隐藏'

            this.$axios.post('/admin/category/' + data.id + '/update_status', {
                status: status
            }, { token: true }).then(() => {
                data.status = status // 更新本地状态
                this.layout.hideLoading(); // 隐藏加载动画
                this.$message({
                    type: 'success',
                    message: msg + '成功'
                })
            }).catch(() => {
                this.layout.hideLoading(); // 隐藏加载动画
            });
        },
        // 编辑|切换状态
        edit(data) {
            // 若当前不是编辑状态，则修改为编辑状态
            if (!data.editStatus) {
                return data.editStatus = true
            }
            // data.editStatus = !data.editStatus
            if (data.name == '') {
                return this.$message({
                    type: 'error',
                    message: '分类名称不能为空'
                })
            }
            this.layout.showLoading() // 显示加载动画
            this.$axios.post('/admin/category/' + data.id,
                { status: data.status, name: data.name, category_id: data.category_id },
                { token: true }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '修改成功'
                    })
                    // 修改成功后，修改编辑状态
                    data.editStatus = false
                    this.layout.hideLoading() // 显示加载动画
                }).catch(() => {
                    data.editStatus = false
                    this.layout.hideLoading() // 显示加载动画
                })
        },
        // 删除节点
        remove(node, data) {
            this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // // console.log(node,data);
                // let parent = node.parent
                // // 假如删除的是二级节点parent.data.children
                // let children = parent.data.children || parent.data
                // let index = children.findIndex(v => {
                //     return v.id === data.id
                // })
                // children.splice(index, 1)
                this.layout.showLoading() // 显示加载动画

                this.$axios.delete('/admin/category/' + data.id,
                    { token: true }).then(() => {
                        this.__init()
                        this.layout.hideLoading() // 显示加载动画
                        this.$message({
                            type: 'success',
                            message: '删除成功'
                        })
                    }).catch(() => {
                        this.layout.showLoading() // 显示加载动画

                    })
            })
        },
        // 增加子分类
        append(data) {
            // let newObj = {
            //     id: 3,
            //     // label: '三级 1-1-1',
            //     name: '三级 1-1-1',
            //     status: 1, //显示状态为显示
            //     editStatus: true, //是否是编辑的状态
            //     child: []
            // }
            // data.child.push(newObj)
            this.layout.showLoading() // 显示加载动画
            this.$axios.post('/admin/category', {
                status: 0,
                name: '新分类',
                category_id: data.id
            }, { token: true }).then(res => {
                let obj = res.data.data;
                obj.editStatus = true; // 设置新分类为编辑状态
                obj.child = []; // 初始化子分类为空数组
                // console.log('新分类数据：', obj);
                data.child.push(obj);
                this.$message({
                    type: 'success',
                    message: '添加成功'
                })
                this.layout.hideLoading() // 隐藏加载动画
            }).catch(() => {
                this.$message({
                    type: 'error',
                    message: '添加失败'
                })
            })
        },
        // 拖拽结束
        nodeDropEnd(...options) {
            // 被拖拽节点对应的数据
            let item = options[0].data;
            //结束拖拽时最后进入的节点数据
            let obj = options[1].data;

            if (obj) {
                if (options[2] === 'before' && options[2] === 'after') {
                    item.category_id = obj.category_id; // 设置被拖拽节点的category_id为最后进入的节点的id
                } else {
                    item.category_id = obj.id; // inner的情况下，设置被拖拽节点的category_id为最后进入的节点的id
                }
            }

        },
        // 拖拽完成node-drop
        nodeDrop() {
            // nodeDrop(...options) {
            // console.log(options[0].data);
            // console.log(options[1].data)

            // console.log(this.sortData);
            this.layout.showLoading() // 显示加载动画
            this.$axios.post('/admin/category/sort',
                { sortdata: JSON.stringify(this.sortData) },
                { token: true }
            ).then(() => {
                this.__init() // 重新加载分类数据
                this.layout.hideLoading() // 隐藏加载动画
                this.$message({
                    type: 'success',
                    message: '排序成功'
                })
            }).catch((err) => {
                this.layout.hideLoading() // 隐藏加载动画
                console.log(err.response?.data); // 打印后端返回的详细错误
            })


        },
        // 添加顶级分类
        createTop() {
            this.$prompt('请输入顶级分类名称', '创建', {
                confirmButtonText: '创建',
                cancelButtonText: '取消',
                inputValidator: function (val) {
                    if (val === '' || val === null) {
                        return '分类名不能为空'
                    }
                    return true
                },
            }).then(({ value }) => {
                // console.log(value)
                // 提交服务器
                this.layout.showLoading() // 显示加载动画
                this.$axios.post('/admin/category', {
                    status: 0,
                    name: value,
                    category_id: 0 // 顶级分类的category_id为0
                }, { token: true }).then(() => {
                    this.__init() // 重新加载分类数据
                    this.$message({
                        type: 'success',
                        message: '顶级分类创建成功'
                    })
                    this.layout.hideLoading() // 隐藏加载动画

                }).catch(() => {
                    this.layout.hideLoading() // 隐藏加载动画
                })
            })

        }
    }
}
</script>
<style>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}

.el-tree-node__content {
    padding: 20px 0;
}
</style>